<template>
    <view class="list">
    	<view class="title">
			<image src="/static/campus/rank-bg.png" mode="widthFix"></image>
    		<view class="t-cont">
				<view>
                    <text class="grade">{{gradeId==2?'高三':gradeId==1?'高二':gradeId==5?'高一':orgGraders[classId]?orgGraders[classId].slice(0, 2):''}}</text>
                    <text class="rank-name">{{medalName}}</text>
                </view>
				<view class="time">
					{{time_slot}}
				</view>
    		</view>
    	</view>
		<view class="tab">
			<text :class="['text', {'active': tabActive==0}]" @click="tabChange(0)">每月之星<text class="tag"></text></text>
			<text :class="['text', {'active': tabActive==1}]" @click="tabChange(1)">积分排行<text class="tag"></text></text>
		</view>
		<view class="ranking" v-show="tabActive==0">
			<view class="title-rank">
				<text class="stu-name">姓名</text>
				<text class="stu-class">班级</text>
				<text class="stu-score">积分</text>
			</view>
			<view class="rank-list">
				<view :class="['tk-item', `tk-item${index+1}`]" v-for="(item, index) in monthly_star" :key="index" @click="seeDetails(item.accountId)" :style="{order: item.rank}">
				
					<view class="stu-name">
						<view class="" style="position: relative;margin-right: 20rpx;">
							<image class="logo" :src="`/static/pm${item.rank}.png`" mode="aspectFill"></image>
							<view :class="['head-box', `head-box${item.rank}`]">
								<image class="head" :src="utils.headImage(item)" mode="aspectFill"></image>
							</view>
						</view>
						<text class="name">{{item.name}}</text>
					</view>
					<text class="stu-class">{{orgGraders[item.clasId]}}</text>
					<text class="stu-score">{{item.score}}分</text>
				</view>
			</view>
		</view>
		<view class="score-ranking" v-show="tabActive==1">
			<view class="st-item my-rank" v-show="userInfo.id">
				<view class="info" @click="seeDetails(userInfo.accountId)">
					<text class="num">{{userInfo.ranking}}</text>
					<image class="head" :src="utils.headImage(userInfo)" mode="aspectFill"></image>
					<view class="name-cla">
						<text>{{userInfo.name}}</text><br>
					</view>
					<text>{{orgGraders[userInfo.clasId]}}</text>
				</view>
				<view class="point">
					<text>{{userInfo.zScore || userInfo.score || 0}}分</text>
				</view>
			</view>
			<view class="st-item" v-for="(item, i) in scoreSort" :key="i">
				<view class="info" @click="seeDetails(item.accountId)">
					<text class="num">{{i+1}}</text>
					<image class="head" :src="utils.headImage(item)" mode="aspectFill"></image>
					<view class="name-cla">
						<text>{{item.name}}</text><br>
					</view>
					<text>{{orgGraders[item.clasId]}}</text>
				</view>
				<view class="point">
					<text>{{item.zScore}}分</text>
				</view>
			</view>
			<!-- <uni-load-more :status="load_more"></uni-load-more> -->
		</view>
    </view>
</template>
<script>
function getLastDay(year,month) {        
	var new_year = year;    //取当前的年份         
	var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）         
	if(month>12) {        
		new_month -=12;        //月份减         
		new_year++;            //年份增         
	}        
	var new_date = new Date(new_year,new_month,1);  //取一个月的第一天   
	return (new Date(new_date.getTime()-1000*60*60*24)).getDate();//获取当月最后一天日期         
} 
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	components: {
		uniLoadMore,
	},
    data() {
        return{
			orgGraders: {},
			baseInfo: {claMap: {}},
			tabActive: 0,
			time_slot: '',
			currentDate: '',
			userInfo: {},
			monthly_star: [{}],
			scoreSort: [],
			page: 1,
			load_more: 'more',
			gradeId: '',
			classId: ''
        }
    },
	onLoad(options){
		this.gradeId = options.gradeId>0?options.gradeId:''
		let date = this.utils.initDateDay(),
		curY = date.split('-')[0],
		curM = date.split('-')[1];
		let date2 = new Date(`${curY}/${curM}/01`);
		date2 = new Date(date2.setDate(date2.getDate() - 1));
		date2 = this.utils.initDateDay(date2)
		let preY = date2.split('-')[0],
				preM = date2.split('-')[1],
				preD = date2.split('-')[2];

		this.time_slot = `${preY}.${preM}.01-${preY}.${preM}.${preD}`;
		this.currentDate = date2;
		this.tabChange(0);
	},
	// onReachBottom(){
	// 	if(this.load_more == 'no-more') return;
	// 	this.page++;
	// 	this.getMonthStar()
	// },
	methods: {
		tabChange(i){
			this.monthly_star = []
			this.tabActive = i;
			
			if(i==1){
				this.getscoreSort()
			}else if(i==0){
				this.getMonthStar()
			}
		},
		getMonthStar(){
			this.api.get('statistics/monthStar', {
				date: this.currentDate,
				rankNum: 3,
				haveMe: true,
				gradeId: this.gradeId,
				classIds: JSON.stringify([])
			}).then(res=>{
				
				let list = res.data.monthStar || [];
				if(this.tabActive == 0){
					this.monthly_star = list
				}else{
					this.monthly_star = this.monthly_star.concat(list)
				}
				this.classId = list[0]?list[0].clasId:''
				this.baseInfo = getApp().globalData.baseInfo
				let newOrgGraders = this.baseInfo.newOrgGraders;
				for(let i=0; i<newOrgGraders.length; i++){
					Object.assign(this.orgGraders, newOrgGraders[i])
				}
				// 获取当前用户的月度之星数据
				let userInfo = getApp().globalData.userInfo;
				let index = list.findIndex(item => item.studentId == userInfo.id && userInfo.user_type==2);

				if(index !=-1){
					this.userInfo = list[index];
					this.userInfo.ranking = index+1
					this.userInfo.id = this.userInfo.studentId
				}else{
					this.userInfo = {}
				}
			})
			
		},
		getscoreSort(){
			this.api.get('statistics/scoreSort', {
				haveMe: true
			}).then(res=>{
				if(res.data.state == 'fail') return;
				let list = res.data.scoreSort;
				this.scoreSort = res.data.scoreSort;
				// 获取当前用户的月度之星数据
				let userInfo = getApp().globalData.userInfo;
				let index = list.findIndex(item => userInfo.user_type==2&&item.id == userInfo.id);
				if(index !=-1){
					this.userInfo = list[index];
					this.userInfo.ranking = index+1
				}else if(userInfo.user_type==2){
					userInfo.zScore = res.data.myScore;
					userInfo.ranking = res.data.mySort
					this.userInfo = userInfo;
				}
			})
		},
		likes(item){
			let val = item.likes==1?0:1;
			this.$set(item, 'likes', val)
		},
		seeDetails(id){
			uni.navigateTo({
				url: '/pages/student/user-details?id=' + id
			})
		}
	}
}
</script>
<style lang="less" scoped>
	.list{
		.title{
			position: relative;
			image{
				width: 100%;
			}
			font-size: 0;
			
		}
		.t-cont{
			position: absolute;
			top: 100rpx;
			left: 88rpx;
			color: #fff;
			.time{
				margin-top: 31rpx;
				line-height: 40rpx;
				font-size: 28rpx;
			}
			.grade{
				display: inline-block;
				width: 92rpx;
				height: 50rpx;
				text-align: center;
				font-size: 32rpx;
				color: #B12424;
				font-weight: bold;
				line-height: 50rpx;
				background: #fff;
				border-radius: 10rpx 0 10rpx 10rpx;
			}
			
			.rank-name{
				display: inline-block;
				font-size: 48rpx;
				margin-left: 7rpx;
				color: #fff;
				font-weight: bold;
				line-height: 48rpx;
				vertical-align: top;
			}
		}
		.tab{
			margin-top: 38rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 132rpx;
			.text{
				display: inline-block;
				height: 40rpx;
				line-height: 40rpx;
			}
			.active{
				color: #28C2CD;
				position: relative;
				.tag{
					position: absolute;
					bottom: -10rpx;
					left: calc(50% - 21rpx);
					height: 6rpx;
					width: 42rpx;
					border-radius: 3rpx;
					background-color: #28C2CD;
				}
			}
			
		}
		.ranking{
			padding: 40rpx 54rpx 0;
			
		}
		.rank-list{
			display: flex;
			flex-direction: column;
		}
		// 每月之星标题
		.title-rank{
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #F9F9F9;
			margin-bottom: 20rpx;
			.stu-name{
				padding-left: 108rpx;
				box-sizing: border-box;
			}
		}
		.stu-name{
			width: 50%
		}
		.stu-class, .stu-score{
			width: 25%;
			white-space: nowrap;
		}
		.stu-score{
			text-align: center;
		}
		.tk-item{
			display: flex;
			align-items: center;
			padding: 22rpx 0;
			.stu-name{
				
				display: flex;
				align-items: center;
			}
			.logo{
				position: absolute;
				top: -14rpx;
				right: -14rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.head-box{
				position: relative;
				width: 80rpx;
				height: 80rpx;
				background: linear-gradient(170deg, #FFC900, #FF7900);
				border-radius: 50%;
				box-sizing: border-box;
				padding: 4rpx;
				
				.head{
					border-radius: 50%;
					width: 72rpx;
					height: 72rpx;
				}
				&.head-box2{
					background: linear-gradient(170deg, #F0F0F0, #C5C5C5);
				}
				&.head-box3{
					background: linear-gradient(170deg, #FAD961, #BC4A0A);
				}
			}
		}
		.score-ranking{
			padding: 34rpx 40rpx;
		}
		.st-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 134rpx;
			.info{
				display: flex;
				align-items: center;
				.num{
					display: inline-block;
					width: 140rpx;
					text-align: center;
					font-weight: 600;
				}
			}
			.head{
				margin: 0 24rpx;
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				border: 3rpx solid #E6E6E6;
			}
			.name-cla{
				margin-right: 24rpx;
				width: 134rpx;
				min-width: 134rpx;
			}
			.point{
				width: 108rpx;
				white-space: nowrap;
				// margin-right: 32rpx;
			}
		}
		.my-rank{
			background-color: #ECF6F6;
			.num{
				color: #28C2CD;
			}
			.head{
				border: 3rpx solid #28C2CD;
			}
		}
	}
</style>
